<template>
	<view class="product">
		<view class="title u-flex-center">
			<u-icon name="play-left" size="14" color="#ffffff"></u-icon>
			<view class="product-title u-flex-center">猜你喜欢</view>
			<u-icon name="play-right" size="14" color="#ffffff"></u-icon>
		</view>
		<product-list @productClick="$emit('productClick',$event)" :list="list" :total="total" :loadMoreStatus="loadMoreStatus" :empty-mode="emptyMode"></product-list>
	</view>
</template>
<script>
	import productList from '@/components/common/product-list.vue'
	export default {
		components: {
			productList,
		},
		data() {
			return {}
		},
		props: {
			list: {
				type: Array,
				default: (() => {
					return [];
				})
			},
			total: {
				type: Number,
				default: (() => {
					return 0;
				})
			},
			loadMoreStatus: {
				type: Number,
				default: (() => {
					return 1;
				})
			},
			emptyMode: {
				type: String,
				default: (() => {
					return '';
				})
			}
		},
		methods: {}
	}
</script>

<style lang="scss">
	.product {

		.title {
			padding: 40rpx 0;
			background-color: $base-index-back;

			.product-title {
				padding: 0 20rpx;
				line-height: 1;
				font-size: 32rpx;
				font-weight: bolder;
				color: #ffffff;
			}
		}
	}
</style>